﻿<script setup lang="ts" name="ExceptionPage404">
import noExist from '@/assets/status/404.svg?component'
import { onBeforeRouteLeave } from 'vue-router'
const { t } = useI18n() // 国际化
const router = useRouter()

const data: any = ref({
  inter: null,
  countdown: 5
})

onBeforeRouteLeave(() => {
  clearInterval(data.value.inter)
})

onMounted(() => {
  data.value.inter = setInterval(() => {
    data.value.countdown--
    if (data.value.countdown === 0) {
      clearInterval(data.value.inter)
      goBack()
    }
  }, 1000)
})

function goBack() {
  router.push('/')
}
</script>

<template>
  <div class="flex justify-center items-center h-screen-sm">
    <div><noExist /></div>
    <div class="ml-12">
      <p v-motion class="font-medium text-4xl mb-4" :initial="{ opacity: 0, y: 100 }" :enter="{ opacity: 1, y: 0, transition: { delay: 100 } }">404</p>
      <p v-motion class="mb-4 text-gray-500" :initial="{ opacity: 0, y: 100 }" :enter="{ opacity: 1, y: 0, transition: { delay: 300 } }">{{ t('error.exception', 'subTitle404') }}</p>
      <el-button v-motion type="primary" :initial="{ opacity: 0, y: 100 }" :enter="{ opacity: 1, y: 0, transition: { delay: 500 } }" @click="goBack">{{ t('error', 'back', [data.countdown]) }}</el-button>
    </div>
  </div>
</template>

<style scoped lang="scss"></style>
